<ui:composition  xmlns="http://www.w3.org/1999/xhtml"
                 xmlns:ui="http://java.sun.com/jsf/facelets"
                 xmlns:h="http://java.sun.com/jsf/html"
                 xmlns:f="http://java.sun.com/jsf/core"
                 xmlns:a4j="http://richfaces.org/a4j"
                 xmlns:rich="http://richfaces.org/rich"
                 xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:head>
        <title>个人工资条</title>
        <style type="text/css">
            input[type="submit"]{
                margin:5px 10px 5px 30px;
                padding:3px 5px 3px 5px;
            }
            .tableStyle tr td{
                padding: 3px 5px 3px 5px;
            }
            .tableStyle tr{
                height:35px;
            }
            .tableStyle{
                border-color: #BED6F8;
                border-collapse: collapse;
                width:1500px;
                margin-bottom: 5px;
            }
        </style>
    </h:head>
    <h:form>
        <rich:panel header="个人工资条" id="salaryDiv" styleClass="content-hight">
            <h:panelGrid columns="6">
                年度:
                <h:selectOneMenu value="#{psnSalaBean.salaYear}">
                    <f:selectItem itemValue=" " itemLabel="-请选择-"/>
                    <f:selectItems value="#{psnSalaBean.psnWageYears}" />
                    <a4j:ajax event="change" listener="#{psnSalaBean.yearChanged}" render="button,imonth"/>
                </h:selectOneMenu>
                月份:
                <h:selectOneMenu id="imonth" value="#{psnSalaBean.month}">
                    <f:selectItem itemValue=" " itemLabel="-请选择-"/>
                    <f:selectItems value="#{psnSalaBean.salaMonthes}" />
                    <a4j:ajax event="change" render="button"/>
                </h:selectOneMenu>
            <a4j:commandButton id="button" value="工资条" action="#{psnSalaBean.genPsnWageResult}"
                               render="yulan,salaGroup,ebutton" disabled="#{empty psnSalaBean.salaYear
                                                                            or empty psnSalaBean.month}"
                               style=" padding-left: 0px; margin-left: 0px"/>
            <h:commandButton id="ebutton" value="导出Excel" action="#{psnSalaBean.exportExcel}"
                             style=" padding-left: 0px; margin-left: 0px"/>      
            </h:panelGrid>     
           
                <h:panelGroup id="salaGroup">
            <div id="saladiv" style="width:750px;height:400px;overflow:auto;border-color: #BED6F8;">
                <rich:dataTable id="yulan" value="#{psnSalaBean.data}"
                            var="explist" rendered="true"
                            rowClasses="list-row-odd,list-row-even"
                            headerClass="table-header"
                            style="width:1500px;"
                                        noDataLabel="无数据!">
                <f:facet name="header">
                     个人工资条(单位/元)
                </f:facet>
                <c:forEach var="ind" begin="0" end="#{psnSalaBean.dateLenght - 1}" step="1">
                    <rich:column>
                        <h:outputText value="#{explist[ind]}"/>
                    </rich:column>
                </c:forEach>
            </rich:dataTable>
                    <h:panelGroup rendered="false">
                        <table id="salaTable" border="1" class="tableStyle">
                            <tr>
                                <th colspan="#{psnSalaBean.dateLenght}"
                                    style="text-align: center;background-color:#D6E6FB;padding: 3px 5px 3px 5px">
                                    个人工资条(单位/元)
                                </th>
                            </tr>
                            <a4j:repeat value="#{psnSalaBean.data}" var="explist">
                                <tr>
                                    <a4j:repeat var="ind" value="#{explist}">
                                        <td>
                                            #{ind}
                                        </td>
                                    </a4j:repeat>
                                </tr>
                            </a4j:repeat>
                        </table>
                    </h:panelGroup>
            </div> 
                </h:panelGroup>
        </rich:panel>
    </h:form>
</ui:composition>